<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>YAML | Example &quot;dynamic_layout_switching&quot;</title>

<!-- JavaScript Detection -->
<script type="text/javascript">document.documentElement.className += " js";</script>

<!-- (en) Add your meta data here -->
<!-- (de) Fuegen Sie hier ihre Meta-Daten ein -->
<link href="css/layout_dynamic_layout_switching.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="css/patches/patch_dynamic_layout_switching.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!-- embedded styles for dynamic layout options -->
<style type="text/css">
  #nav { overflow:hidden; }
  #layout-switcher { padding: 10px 20px; margin-top: 10px; }

  #js-info { display:block; clear:both; padding: 10px 20px; background: #fee; color: #800; }
  .js #js-info { display:none; }

  p.switch { display:none; }
  .js p.switch { display:block; }

  .active { font-weight:bold; color: #800 !important; }
</style>

<!-- jQuery & Plugins -->
<script src="../../js/lib/jquery-1.6.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

  $('a[id*=toggle]').click(function(){
    if ($(this).hasClass('active') === true) {
      $('a').removeClass('active');
      $('body').removeAttr('class');
    } else {
      $('a').removeClass('active');
      $('body').removeAttr('class').addClass($(this).text());
      $(this).addClass('active');
    }     
  });
  $('a#reset').click(function(){
      $('a').removeClass('active');
      $('body').removeAttr('class');
      $(this).addClass('active');
  });
});
</script>
</head>
<body>
<!-- skip link navigation -->
<ul id="skiplinks">
	<li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
	<li><a class="skip" href="#col3">Skip to main content (Press Enter).</a></li>
</ul>

<div class="page_margins">
  <div class="page">
    <div id="header" role="banner">
      <div id="topnav" role="contentinfo">
        <span><a href="#">Login</a> | <a href="#">Contact</a> | <a href="#">Imprint</a></span>
      </div>
      <h1>Example | Beispiel <em>&laquo;dynamic_layout_switching&raquo;</em></h1>
      <span>YAML &#8226; (X)HTML/CSS Framework</span>
    </div>
    <!-- begin: main navigation #nav -->
    <div id="nav" role="navigation">
      <div class="hlist">
        <ul>
          <li><a href="../index.html">Table Of Contents</a></li>
          <li><a href="../05_navigation/menu_shiny_buttons.html">Next Example</a></li>
          <li><a href="3col_gfxborder.html">Previous Example</a></li>
        </ul>
      </div>
    </div>
    <!-- end: main navigation -->
    <!-- begin: main content area #main -->
    <div id="layout-switcher" class="info">
      <h2>About this example</h2>
      <p>If you want to alter your screen layout without having to create a new (X)HTML template and a new central stylesheet, then why not use <em>generic CSS classes</em> (added to <code>&lt;body&gt;</code> element). This example demonstrates how this can be done. By clicking the provided links one of the CSS classes <code>.hidecol1</code>,<code> .hidecol2</code> or <code>.hideboth</code> is added to <code>&lt;body&gt;</code>. More information about the usage of thes classes can be found in the <a href="http://www.yaml.de/de/dokumentation/anwendung/grundvariationen.html">documentation</a> (see section: &quot;Generic classes for layout design&quot;).</p>
      <p class="switch"><strong>Toggle to change the layout:</strong> <a id="reset" class="active" href="#">show all columns (default)</a> | <a id="toggle_a" href="#">hidecol1</a> | <a id="toggle_b" href="#">hidecol2</a> | <a id="toggle_c" href="#">hideboth</a></p>
    </div>
    <div id="js-info">JavaScript has to be enabled for this demonstration.</div>

    <div id="main">
      <!-- begin: #col1 - first float column -->
      <div id="col1" role="complementary">
        <div id="col1_content" class="clearfix">
          <h2>Column  #col1</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque. </p>
          <h3>Lorem ipsum ... </h3>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. </p>
        </div>
      </div>
      <!-- end: #col1 -->
      <!-- begin: #col2 second float column -->
      <div id="col2" role="complementary">
        <div id="col2_content" class="clearfix">
          <h2>Column  #col2</h2>
          <p>Integer condimentum, justo a venenatis vulputate, enim pede porttitor eros, non   pretium lorem orci id tortor. Nulla a ligula. Mauris nulla arcu, luctus vel,   consequat non, luctus eu, nisi. Mauris volutpat, nunc eget pretium blandit,   ligula quam commodo nisl, ac fermentum nibh pede et nulla. In condimentum   bibendum nisi. Vestibulum risus. </p>
          <p>Nullam placerat varius nibh. Quisque tellus   sapien, placerat sed, aliquam sit amet, scelerisque sit amet, nisi. Pellentesque   eget leo vitae felis laoreet dictum. Duis pellentesque porttitor sapien. Fusce   leo. Nulla leo. Donec mattis, justo nec gravida euismod, massa mi posuere   mauris.</p>
        </div>
      </div>
      <!-- end: #col2 -->
      <!-- begin: #col3 static column -->
      <div id="col3" role="main">
        <div id="col3_content" class="clearfix">
          <h2>Column  #col3</h2>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus.</p>
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam malesuada   suscipit pede. Nullam ipsum lacus, varius vel, nonummy in, consequat ut, neque.   Vivamus viverra. Duis dolor arcu, lacinia sit amet, sollicitudin sed, aliquet   vel, quam. Pellentesque molestie laoreet tortor. Aenean quam. Pellentesque magna   metus, venenatis sit amet, congue nec, dictum in, est. Aliquam nibh. Integer   congue nisl in mauris. Ut risus diam, ornare eget, interdum id, tincidunt at,   eros.</p>
          </blockquote>
          <p>Nulla vitae mauris. Phasellus vel ligula quis dolor bibendum egestas. Duis a   massa ut orci varius placerat. Sed leo nulla, tempor nec, commodo in, fringilla   vel, nibh. Cras nibh. Pellentesque venenatis felis. Cum sociis natoque penatibus   et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum fringilla   gravida nunc. Mauris neque. Cras gravida metus eget sapien. Sed faucibus, turpis   ut pretium hendrerit, turpis mauris scelerisque tellus, vel convallis metus   massa in neque.</p>
        </div>
        <div id="ie_clearing">&nbsp;</div>
        <!-- End: IE Column Clearing -->
      </div>
      <!-- end: #col3 -->
    </div>
    <!-- end: #main -->
    <!-- begin: #footer -->
    <div id="footer" role="contentinfo">Footer with copyright notice and status information<br />
Layout based on <a href="http://www.yaml.de/">YAML</a></div>
    <!-- end: #footer -->
  </div>
</div>
<!-- full skiplink functionality in webkit browsers -->
<script src="../../yaml/core/js/yaml-focusfix.js" type="text/javascript"></script>
</body>
</html>
